<template>
  <div class="my-info-page">
    <van-nav-bar title="个人信息" left-arrow @click-left="goBack" />
    
    <!-- 头像 -->
    <div class="avatar-section">
      <van-cell title="头像" is-link @click="changeAvatar">
        <template #value>
          <van-image
            :src="userInfo.avatar || '/imgs/default-avatar.png'"
            width="50"
            height="50"
            round
          />
        </template>
      </van-cell>
    </div>
    
    <!-- 基本信息 -->
    <div class="info-section">
      <van-cell-group>
        <van-field
          v-model="userInfo.nickname"
          label="昵称"
          placeholder="请输入昵称"
          @blur="updateUserInfo"
        />
        <van-field
          v-model="userInfo.phone"
          label="手机号"
          readonly
          @click="changePhone"
        />
        <van-field
          v-model="userInfo.email"
          label="邮箱"
          placeholder="请输入邮箱"
          @blur="updateUserInfo"
        />
        <van-field
          v-model="userInfo.birthday"
          label="生日"
          readonly
          @click="selectBirthday"
        />
        <van-field
          v-model="userInfo.gender"
          label="性别"
          readonly
          @click="selectGender"
        />
      </van-cell-group>
    </div>
    
    <!-- 其他设置 -->
    <div class="settings-section">
      <van-cell-group>
        <van-cell title="修改密码" is-link @click="changePassword" />
        <van-cell title="实名认证" is-link @click="realNameAuth" />
        <van-cell title="隐私设置" is-link @click="privacySettings" />
      </van-cell-group>
    </div>
    
    <!-- 退出登录 -->
    <div class="logout-section">
      <van-button type="danger" block @click="logout">退出登录</van-button>
    </div>
    
    <!-- 性别选择弹窗 -->
    <van-popup v-model:show="showGenderPopup" position="bottom">
      <van-picker
        :columns="genderOptions"
        @confirm="onGenderConfirm"
        @cancel="showGenderPopup = false"
      />
    </van-popup>
    
    <!-- 生日选择弹窗 -->
    <van-popup v-model:show="showBirthdayPopup" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择生日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onBirthdayConfirm"
        @cancel="showBirthdayPopup = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const userInfo = ref({
  nickname: '',
  phone: '',
  email: '',
  birthday: '',
  gender: '',
  avatar: ''
})

const showGenderPopup = ref(false)
const showBirthdayPopup = ref(false)
const currentDate = ref(new Date())
const minDate = new Date(1900, 0, 1)
const maxDate = new Date()

const genderOptions = ['男', '女', '保密']

// 修改头像
const changeAvatar = () => {
  showToast('头像修改功能开发中')
}

// 修改手机号
const changePhone = () => {
  showToast('手机号修改功能开发中')
}

// 选择性别
const selectGender = () => {
  showGenderPopup.value = true
}

// 确认性别选择
const onGenderConfirm = (value) => {
  userInfo.value.gender = value
  showGenderPopup.value = false
  updateUserInfo()
}

// 选择生日
const selectBirthday = () => {
  showBirthdayPopup.value = true
}

// 确认生日选择
const onBirthdayConfirm = (value) => {
  const date = new Date(value)
  userInfo.value.birthday = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
  showBirthdayPopup.value = false
  updateUserInfo()
}

// 更新用户信息
const updateUserInfo = async () => {
  try {
    // 这里应该调用更新用户信息 API
    // await updateUserInfoAPI(userInfo.value)
    
    userStore.updateUserInfo(userInfo.value)
    showToast('更新成功')
  } catch (error) {
    console.error('更新用户信息失败:', error)
    showToast('更新失败')
  }
}

// 修改密码
const changePassword = () => {
  showToast('修改密码功能开发中')
}

// 实名认证
const realNameAuth = () => {
  showToast('实名认证功能开发中')
}

// 隐私设置
const privacySettings = () => {
  showToast('隐私设置功能开发中')
}

// 退出登录
const logout = async () => {
  try {
    await showConfirmDialog({
      title: '确认退出',
      message: '确定要退出登录吗？'
    })
    
    userStore.logout()
    showToast('已退出登录')
    router.replace('/home')
  } catch {
    // 用户取消
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 组件挂载时获取用户信息
onMounted(() => {
  if (userStore.hasUserInfo) {
    userInfo.value = { ...userStore.userInfo }
  }
})
</script>

<style lang="scss" scoped>
.my-info-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
}

.avatar-section,
.info-section,
.settings-section {
  background: #fff;
  margin-bottom: 10px;
}

.logout-section {
  padding: 20px;
}
</style> 